<!DOCTYPE html>
<html class="x-admin-sm">
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>欢迎页面-X-admin2.2</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <link rel="stylesheet" href="/css/font.css">
    <link rel="stylesheet" href="/css/xadmin.css">
    <script src="/lib/layui/layui.js" charset="utf-8"></script>
    <script type="text/javascript" src="/js/xadmin.js"></script>
    <script type="text/javascript" src="/js/jquery.min.js"></script>
</head>
<body>
<div class="layui-fluid">

    <div class="layui-row layui-col-space15">
        <div class="layui-col-md12">
            <div class="layui-card">
                <div class="layui-card-body ">
                    <input type="hidden" th:value="${#httpSession.getAttribute('mname')}" id="mname">
                    <blockquote class="layui-elem-quote">欢迎管理员：
                        <span class="x-red" id="span1"></span>！当前时间:<span id="time"></span>
                        <a class="layui-btn layui-btn-small" style="line-height:1.6em;margin-top:3px;float:right" onclick="location.reload()" title="刷新">
                            <i class="layui-icon layui-icon-refresh" style="line-height:30px"></i></a>
                    </blockquote>
                </div>
            </div>
        </div>
        <div class="layui-col-md12" id="card1">
            <div id="card">
                <div class="layui-card">


                <div class="layui-card-header">

                    <h3  style="font-weight:bold">订单列表</h3>
                </div>

                <div class="layui-col-md12">

                    <div class="layui-card">
                        <div class="layui-card-body ">
                            <div class="layui-collapse" lay-filter="test">

                                <div th:each="list,index : ${list} ">

                                    <div class="layui-colla-item" th:if="${list.orderId} ne 3">
                                        <div class="layui-colla-title">
                                            <div class="">订单ID: <th:block th:text="${list.orderId}" />  &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                                                下单时间:<th:block th:text="${list.createTime}" /> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                                                <span class="layui-card-body" style="color: #1E9FFF">取餐码:</span><th:block th:text="${list.ds}" />
                                            </div>
                                        </div>
                                        <div class="layui-colla-content layui-show">
                                            订单备注:<th:block th:text="${list.remark}" /> <span th:if="${list.remark} eq ''">暂无特殊要求</span>&nbsp;

                                            <table class="layui-table " lay-size="sm">
                                                <thead>
                                                <tr>
                                                    <th>名称</th>
                                                    <th>数量</th>
                                                    <th>商品操作</th>
                                                </tr>
                                                </thead>
                                                <tbody>
                                                <div th:each="ors : ${list.orderVOS}">
                                                    <tr>
                                                        <td><th:block th:text="${ors.name}" /></td>
                                                        <td><th:block th:text="${ors.number}" /></td>
                                                        <td><th:block /><button th:if="${list.status} eq 1" th:onclick="on('[(${index})]','[(${list.orderId})]')" class="layui-btn ">
                                                            <span id="span">开始制作</span>
                                                        </button>
                                                            <button th:if="${list.status} eq 2" th:onclick="on('[(${index})]','[(${list.orderId})]')" class="layui-btn layui-btn-normal">
                                                                <span id="span">制作完成</span>
                                                            </button>
                                                            <button th:if="${list.status} eq 3" th:onclick="on('[(${index})]','[(${list.orderId})]')" class="layui-btn layui-btn-normal">
                                                                <span id="span">去配送</span>
                                                            </button><br></td>
                                                    </tr>
                                                </div>
                                                </tbody>
                                            </table>
                                        </div>
                                    </div>
                                </div>

                            </div>
                        </div>
                    </div>
                </div>

            </div>
            </div>
        </div>
        <input type="hidden" id="mid" th:value="${#httpSession.getAttribute('mid')}">
    </div>
    <!--播放音乐-->
     <audio id="notice" loop="loop">
        <source src="/mp3/dindan.mp3" type="audio/mpeg">
     </audio>
</div>
</div>
</body>
</html>

<script>
    var name = $("#mname").val()
    var mid = $('#mid').val();
    $("#span1").text(name)
    function getTime() {
        var myDate = new Date();
        var myYear = myDate.getFullYear(); //获取完整的年份(4位,1970-????)
        var myMonth = myDate.getMonth() + 1; //获取当前月份(0-11,0代表1月)
        var myToday = myDate.getDate(); //获取当前日(1-31)
        var myDay = myDate.getDay(); //获取当前星期X(0-6,0代表星期天)
        var myHour = myDate.getHours(); //获取当前小时数(0-23)
        var myMinute = myDate.getMinutes(); //获取当前分钟数(0-59)
        var mySecond = myDate.getSeconds(); //获取当前秒数(0-59)
        var week = ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六'];
        var nowTime;

        nowTime = myYear + '年' + fillZero(myMonth) + '月' + fillZero(myToday) + '日' + '  ' + fillZero(myHour) + ':' +
            fillZero(myMinute) + ':' + fillZero(mySecond) + '  ' + week[myDay] + '  ';
        //console.log(nowTime);
        $('#time').html(nowTime);
    };

    function fillZero(str) {
        var realNum;
        if (str < 10) {
            realNum = '0' + str;
        } else {
            realNum = str;
        }
        return realNum;
    }



    setInterval(getTime, 1000);

    function on (t,i){
        console.log(t)
        console.log(i)
        $.ajax({
            url: 'order/updateOrderStatus?oid='+i,
            type: 'put'
        })
        $("#card1").load(location.href + " #card1")
         $("#card").load(location.href + " #card")
    }
    layui.use('layer', function(){
        var layer = layui.layer;

        // <button onclick="javascript:document.getElementById('notice').pause()"></button>
    var websocket = null;
    if ('WebSocket' in window){
        websocket = new WebSocket('ws://localhost:8081/webSocket')
    }else{
        alert("改浏览器不支持websocket！")
    }
    websocket.onopen = function (event) {
        console.log("建立成功")
    }
    websocket.onclose = function (event) {
        console.log("连接关闭")
    }
    websocket.onmessage = function (event) {
        console.log(event)
        console.log("收到消息"+event.data)
        if (event.data != '跳转消息'){
            //消息和播放音乐
            document.getElementById("notice").play();
            layer.alert(event.data, function(index){
                $("#notice").get(0).pause()
                $("#card").load(location.href + " #card")
                $.ajax({
                    url: '/product/findAllProductByMid?mid=' + mid,
                    dataType: 'json',
                    type: 'get',
                    success: res => {
                        console.log(res)
                        var name ='';
                        $.each(res.data.records, (item,res) => {
                            if (res.isSell != 1){
                                if (res.stock < 10){
                                    name = name +',' + res.name
                                    var index = layer.open({
                                        content: '您销售的:'+name+'；不足10件，请立即添加库存或及时下架，避免影响用户体验。'
                                    });
                                }

                            }
                        })
                    }
                })
                layer.close(index);
            });
        }


    }
    websocket.onerror = function (event) {
        console.log("建立发生错误")
    }
    window.onbeforeunload = function (event) {
        // 关闭连接
        websocket.close();
    }

    });
</script>